"use client";

import React, { useState } from "react";
import "./index.scss";
import { PauseCircleOutlined } from "@ant-design/icons";

interface InputBoxProps {
  placeholder?: string;
  onSend?: (message: string) => void;
  disabled?: boolean;
  onInterrupt?: () => void;
  isLLMResponding?: boolean;
}

const CurrentInput: React.FC<InputBoxProps> = ({
  placeholder = "请输入消息...",
  onSend,
  disabled = false,
  onInterrupt,
  isLLMResponding = false,
}) => {
  const [message, setMessage] = useState("");

  const handleSend = () => {
    if (message.trim() && !disabled) {
      onSend?.(message.trim());
      setMessage("");
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="simple-input-box">
      <div className="content">
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder={placeholder}
          disabled={disabled}
          className="simple-input"
        />
        {isLLMResponding ? (
          <button
            onClick={onInterrupt}
            className="simple-send-btn"
            style={{ backgroundColor: "#f44336", color: "white" }}
          >
            <PauseCircleOutlined />
          </button>
        ) : (
          <button
            onClick={handleSend}
            disabled={disabled || !message.trim()}
            className="simple-send-btn"
          >
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              className="send-icon"
            >
              <path d="M22 2L11 13" />
              <path d="M22 2L15 22L11 13L2 9L22 2Z" />
            </svg>
          </button>
        )}
      </div>
    </div>
  );
};

export default CurrentInput;
